import React from 'react';
import { Menu, Avatar, Dropdown, Modal } from 'antd';
import { Icon } from '@ant-design/compatible';
import { routerRedux } from 'dva/router';
import { delAuthority } from '../../utils/authority';
import { reloadAuthorized } from '../../utils/Authorized';
import styles from './index.less';
import tools from '../../utils';
import ModifyPassword from '../../pages/login/modifyPassword';

class page extends React.PureComponent {
  state = {
    pwd_visible: false,
    popupVisible: false,
  };

  // 页眉右边小菜单的点击事件
  funcOnMenuClick = (item) => {
    const {props} = this;
    switch (item.key) {
      // 更改密码
      case "pwd":
        if (window.isIE) props.dispatch(routerRedux.push("/editPw"));
        else this.setState({pwd_visible: true});
        break;

      // 退出登录
      default:
        delAuthority();
        reloadAuthorized();
        props.dispatch(routerRedux.replace('/user/login'));
    }
  };

  render() {
    const {theme} = this.props;

    const menu = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.funcOnMenuClick}>
        <Menu.Item key="pwd">
          <Icon type="key"/>
          更改密码
        </Menu.Item>
        <Menu.Divider/>
        <Menu.Item key="logout">
          <Icon type="logout"/>
          退出登录
        </Menu.Item>
      </Menu>
    );

    let className = styles.right;
    if (theme === "dark") {
      className = `${styles.right}  ${styles.dark}`;
    }

    const {state} = this;

    return (
      <div className={className}>
        <Dropdown overlay={menu}>
          <span className={`${styles.action} ${styles.account}`}>
            <Avatar
              size="small"
              className={styles.avatar}
              src={tools.funcGetLocalValue("headPortrait") || 'images/userLogo.png'}
            />
            <span className={styles.name}>
							{tools.funcGetLocalValue('name')}
						</span>
          </span>
        </Dropdown>

        <Modal
          width={640}
          title={(
            <div>
              <Icon type="key" style={{fontSize: 16}}/>
              <span> 更改密码</span>
            </div>
          )}
          footer={null}
          visible={state.pwd_visible}
          onCancel={() => this.setState({pwd_visible: false})}
        >
          <ModifyPassword/>
        </Modal>
      </div>
    );
  }
}

export default page;
